<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/11/20
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <style >
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-50%)}
    </style>
</head>
<body>
    <button type="button" class="layui-btn" id="c">添加</button>
    <button type="button" class="layui-btn" id="deleteAll">批量删除</button>
    <form class="layui-form"  style="display: none" id="d" >
        <div class="layui-form-item">
            <label class="layui-form-label">动物名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">动物年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">动物体重</label>
            <div class="layui-input-inline">
                <input type="text" name="weight" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <form class="layui-form"  style="display: none" id="update" lay-filter="update">
        <input type="text" name="id" hidden="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">动物名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">动物年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">动物体重</label>
            <div class="layui-input-inline">
                <input type="text" name="weight" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="gos">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <table id="demo" lay-filter="test"></table>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
    <script>
        layui.use(['table','form','layer'], function(){
            var table = layui.table;
            var form = layui.form;
            console.log(form)
            var layer = layui.layer;
            //展示分页
            table.render({
                elem: '#demo',
                limit:2,
                limits:[1,2,3,4]
                ,url: '${pageContext.request.contextPath}/animals' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type:"checkbox"},
                    {field: 'id', title: 'ID', }
                    ,{field: 'name', title: '动物姓名',}
                    ,{field: 'age', title: '动物年龄', }
                    ,{field: 'weight', title: '体重', }
                    ,{ title: '操作', toolbar:'#barDemo'}
                ]]
            });
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/animals/"+data.id,
                            type:"delete",
                            success:function () {
                                table.reload("demo",{
                                    page:{curr:1}
                                });
                                layer.msg("删除成功")
                            }
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                    //同步更新缓存对应的值
                    // $("#updates").click(function() {
                        $.ajax({
                            url:"animals/"+data.id,
                            success:function (data) {
                                form.val("update",{
                                    "id":data.id,
                                    "name":data.name,
                                    "age":data.age,
                                    "weight":data.weight
                                })
                            }
                        })
                        layer.open({
                            area:['500px', '300px'],
                            type: 1,
                            content: $('#update') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                    // })
                } else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });
            form.on("submit(gos)", function(obj){
                var filed= obj.field;
                console.log(filed.id)
                console.log(filed)
                $.ajax({
                    url:"${pageContext.request.contextPath}/animals/"+filed.id,
                    contentType:"application/json",
                    data:JSON.stringify(filed),
                    type:"put",
                    success:function (data) {
                        console.log(data)
                        //关闭弹出层
                        layer.closeAll();
                        //清空表单中的数据
                        $("#d").get(0).reset();
                        table.reload("demo");
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*批量删除*/
            $("#deleteAll").click(function () {
                var checkStatus =table.checkStatus('demo');
                var datas=checkStatus.data
                console.log(datas)
                var param=[];
                if(datas.length!=0){
                    for(var i=0;i<datas.length;i++){
                       param.push(datas[i].id);
                    }
                    console.log(datas)
                }else{
                    layer.msg("请选中行")
                }
                $.ajax({
                    url:"animals",
                    contentType:"application/json",
                    data:JSON.stringify(param),
                    type:"delete",
                    success:function () {
                        table.reload("demo",{page:{curr:1}})
                    }
                })
            })
            form.on("submit(go)", function(obj){
                var filed= obj.field;
                console.log(filed)
                $.ajax({
                    url:"${pageContext.request.contextPath}/animals/",
                    contentType:"application/json",
                    data:JSON.stringify(filed),
                    type:"post",
                    success:function (data) {
                        console.log(data)
                        //关闭弹出层
                        layer.closeAll();
                        //清空表单中的数据
                        $("#d").get(0).reset();
                        table.reload("demo");
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
    <script type="text/html" id="barDemo">
      <%--  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>--%>
        <a class="layui-btn layui-btn-xs" lay-event="edit" id="updates">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/javascript">
        $("#c").click(function () {
            layui.use('layer',function () {
                var layer = layui.layer;
                layer.open({
                    area:['500px', '300px'],
                    type: 1,
                    content: $('#d') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            })
        })
    </script>
</body>
</html>
